<template>
  <el-dialog :visible.sync="pShow" width="850px">
    <div class="fz-14 fw-6 color3 linh-40 titleBox">单位基础信息</div>
    <el-descriptions
      :column="2"
      border
      :labelStyle="{ width: '150px', 'white-space': 'nowrap' }"
    >
      <el-descriptions-item label="单位名称">
        {{ form.cname }}
      </el-descriptions-item>
      <el-descriptions-item label="所属渠道">
        {{ form.channelName }}
      </el-descriptions-item>
      <el-descriptions-item label="所属行业">
        <dict-tag :options="dict.type.industry" :value="form.industry" />
      </el-descriptions-item>
      <el-descriptions-item label="单位法人">
        {{ form.legalname }}
      </el-descriptions-item>
      <el-descriptions-item label="单位跟进人">
        <SelectBusinessUser v-if="form.businessUserId" :defaultValue.sync="form.businessUserId" disabled />
      </el-descriptions-item>
      <el-descriptions-item label="单位等级">
        <dict-tag :options="dict.type.company_level" :value="form.levels" />
      </el-descriptions-item>
      <el-descriptions-item label="单位类型">
        <dict-tag :options="dict.type.company_type" :value="form.comtype" />
      </el-descriptions-item>
      <el-descriptions-item label="单位联系人">
        {{ form.contactName }}
      </el-descriptions-item>
      <el-descriptions-item label="联系人电话">
        {{ form.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="单位地址">
        <span>{{ form.provinceName }} </span>
        <span>{{ form.cityName }} </span>
        <span>{{ form.distinctsName }} </span>
      </el-descriptions-item>
      <el-descriptions-item label="详细地址" :span="24">
        {{ form.address }}
      </el-descriptions-item>
      <el-descriptions-item label="单位简介" :span="24">
        {{ form.remarks }}
      </el-descriptions-item>
      <el-descriptions-item label="单位主图">
        <image-preview
          v-if="form.cimg1"
          :src="form.cimg1"
          :width="140"
          :height="140"
        />
      </el-descriptions-item>
      <el-descriptions-item label="单位二维码">
        <image-preview
          v-if="form.wxmpUrl"
          :src="form.wxmpUrl"
          :width="140"
          :height="140"
        />
      </el-descriptions-item>
      <el-descriptions-item label="营业执照">
        <image-preview
          v-if="form.businessimg"
          :src="form.businessimg"
          :width="140"
          :height="140"
        />
      </el-descriptions-item>
      <el-descriptions-item label="医疗机构执业许可证">
        <image-preview
          v-if="form.miplImg"
          :src="form.miplImg"
          :width="140"
          :height="140"
        />
      </el-descriptions-item>
    </el-descriptions>
    <div class="fz-14 fw-6 color3 linh-40 titleBox mt-10">管理员信息</div>
    <el-descriptions
      :column="2"
      border
      :labelStyle="{ width: '150px', 'white-space': 'nowrap' }"
    >
      <el-descriptions-item label="管理员姓名">
        {{ form.adminname }}
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <dict-tag :options="dict.type.sys_user_sex" :value="form.honorific" />
      </el-descriptions-item>
      <el-descriptions-item label="管理员手机号">
        {{ form.mobile }}
      </el-descriptions-item>
      <el-descriptions-item label="管理员账号">
        {{ form.adminacc }}
      </el-descriptions-item>
    </el-descriptions>

    <div class="fz-14 fw-6 color3 linh-40 titleBox mt-10">业务与权限</div>
    <el-descriptions
      :column="1"
      border
      :labelStyle="{ width: '150px', 'white-space': 'nowrap' }"
    >
      <el-descriptions-item label="单位服务商">
        <el-tag
          v-for="(item, index) in form.serviceCompanyList"
          :key="index"
          class="mr-5"
          >{{ item.cname }}</el-tag
        >
      </el-descriptions-item>
      <el-descriptions-item label="审证审方机构">
        <SelectCompany
          v-if="form.apPrescriptionCompanyId"
          :defaultValue.sync="form.apPrescriptionCompanyId"
          :companyType="0"
          disabled
        />
      </el-descriptions-item>
      <el-descriptions-item label="渠道分润比例">
        <span>{{ form.channelFee }}</span>
        <span class="pl-2">%</span>
      </el-descriptions-item>
      <el-descriptions-item label="PAD菜单权限">
        <el-checkbox-group v-model="form.menuId" disabled>
          <el-checkbox
            v-for="(item, index) in baseList"
            :key="index"
            :label="item.menuId"
            >{{ item.menuName }}</el-checkbox
          >
        </el-checkbox-group>
      </el-descriptions-item>
    </el-descriptions>

    <div class="fz-14 fw-6 color3 linh-40 titleBox mt-10">平台入驻审核进度</div>
    <el-descriptions
      :column="2"
      border
      :labelStyle="{ width: '150px', 'white-space': 'nowrap' }"
    >
      <el-descriptions-item label="审核状态" :span="24">
        <el-tag
          v-if="
            apList.length === 3 &&
            (apList[1].aplogstatus == 4 || apList[2].aplogstatus == 4)
          "
          type="warning"
          >(审核中)</el-tag
        >
        <el-tag v-else-if="apList.length === 3" type="success"
          >(审核完成)</el-tag
        >
        <template v-else>
          <dict-tag :options="dict.type.apstatus" :value="form.apstatus" />
        </template>
      </el-descriptions-item>
      <el-descriptions-item v-if="apList.length" label="审核详情" :span="24">
        <div
          v-for="(item, index) in apList"
          :key="index"
          class="pt-10 disFlxJS disFlxAC"
          :class="{ dashed: index !== 0 }"
        >
          <div class="disFlxAC">
            <div class="origin" :class="{ bgf: !item.createTime }"></div>
            <div>
              <div class="disFlxAC">
                <dict-tag
                  :options="dict.type.user_type"
                  :value="item.usertype"
                />
                <span class="pl-10">{{ item.createBy }}</span>
              </div>
              <div class="pt-5">
                <dict-tag
                  :options="dict.type.aplogstatus"
                  :value="item.aplogstatus"
                />
              </div>
              <div class="pt-5" v-if="item.aptext">
                审核说明：（{{ item.aptext || "无" }}）
              </div>
            </div>
          </div>
          <div>
            {{ item.createTime || "" }}
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <div slot="footer" class="dialog-footer">
      <div
        class="disFlxCC"
        v-if="
          (userInfo.userType == 0 && form.apstatus == 1) ||
          (userInfo.userType == 1 && form.apstatus == 2)
        "
      >
        <div>
          <el-button type="primary" @click="_ap('0')">审核通过</el-button>
          <el-button type="warning" @click="_ap('3')">驳回申请</el-button>
        </div>
      </div>
      <div class="disFlxCC" v-else>
        <el-button type="primary" @click="pShow = false">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  getCompany,
  appmenuBaseList,
  aplogList,
  companyAp,
} from "@/api/company/company";
import { treeselect } from "@/api/channel/channel";
import { listArea } from "@/api/saas/area";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import SelectBusinessUser from "@/views/system/user/selectBusinessUser";
import SelectCompany from "@/components/SelectCompany";

export default {
  components: { Treeselect, SelectBusinessUser, SelectCompany },
  computed: {
    userInfo() {
      return this.$store.state.user.userInfo;
    },
  },
  dicts: [
    "industry",
    "company_level",
    "company_type",
    "sys_user_sex",
    "apstatus",
    "aplogstatus",
    "user_type",
  ],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    companyId: {
      type: Number | String,
      default: "",
    },
  },
  watch: {
    show(nval) {
      if (nval) {
        this.getCompanyDetails();
        this.getAplogList();
      } else {
        this.pShow = nval;
      }
    },
    pShow(nval) {
      if (!nval) {
        this.$emit("close");
      }
    },
  },
  data() {
    const that = this;
    return {
      // 渠道树选项
      channelOptions: [],
      baseList: [],

      pShow: false,
      form: {
        menuId: [], // 菜单的id
      },
      apList: [],
    };
  },
  created() {
    this.getTreeselect();
    this.getAppmenuBaseList();
  },
  methods: {
    /** 查询渠道下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.channelOptions = response.data;
      });
    },
    // 获取详情
    getCompanyDetails() {
      getCompany(this.companyId).then((response) => {
        this.form = response.data;
        this.form.channelFee ? this.form.channelFee : 0;
        if (this.form.province) {
          listArea({ level: 1 }).then((res) => {
            this.$set(
              this.form,
              "provinceName",
              res.data.find((v) => v.id === this.form.province).name
            );
          });

          if (this.form.city) {
            listArea({ level: 2, pid: this.form.province }).then((res) => {
              this.$set(
                this.form,
                "cityName",
                res.data.find((v) => v.id === this.form.city).name
              );
            });
            if (this.form.distincts) {
              listArea({ level: 3, pid: this.form.city }).then((res) => {
                this.$set(
                  this.form,
                  "distinctsName",
                  res.data.find((v) => v.id === this.form.distincts).name
                );
              });
            }
          }
        }

        this.form.apstatus = String(this.form.apstatus);
        this.pShow = true;
      });
    },
    // 获取菜单列表
    getAppmenuBaseList() {
      appmenuBaseList().then((res) => {
        this.baseList = res.data;
      });
    },
    // 获取审核进度
    getAplogList() {
      aplogList({
        comId: this.companyId,
      }).then((res) => {
        this.apList = res.rows;
      });
    },
    // 审核
    _ap(apstatus) {
      let params = {
        id: this.companyId,
        apstatus, // 审核状态3审核不通过 0通过
        aptext: "", // 拒绝原因
      };
      this.$prompt("审批说明", "提示", {
        confirmButtonText: apstatus === "3" ? "确认驳回" : "确认通过",
        inputPattern: apstatus === "3" ? /\s*\S+?/ : undefined,
        inputPlaceholder:
          apstatus === "3" ? "请输入驳回原因(必填)" : "请输入通过原因(非必填)",
        inputErrorMessage: apstatus === "3" ? "请输入驳回原因" : undefined,
      }).then(({ value }) => {
        params.aptext = value;
        companyAp(params).then((res) => {
          this.$message.success("审核完成");
          this.pShow = false;
          this.$emit("upList");
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.titleBox {
  position: relative;
  padding-left: 20px;
  &::before {
    display: block;
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(50%);
    width: 4px;
    height: 20px;
    background-color: red;
  }
}
.origin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffba00;
  border: solid 1px #e5e5e5;
  margin-right: 10px;
  position: relative;
  z-index: 2;
}
.dashed {
  position: relative;
  &::before {
    content: " ";
    display: block;
    height: calc(100% - 10px);
    position: absolute;
    z-index: 1;
    bottom: 50%;
    left: 10px;
    border-left: dashed 1px #e5e5e5;
  }
}
</style>
<style scoped>
.checkForm >>> .el-form-item {
  margin-bottom: 5px;
}
.checkForm >>> .vue-treeselect__control {
  border: none;
  background-color: #fff;
  padding-left: 0;
}
.checkForm >>> .vue-treeselect__control .vue-treeselect__single-value {
  color: #606266 !important;
  padding-left: 0;
}
</style>
